import React, {Component} from 'react';
import {base, high, toast} from 'nc-lightapp-front';
import './index.less';
import exportPsnInfo from "./functions/exportPsnInfo";

import language from '../../language';

const {NCRadio} = base;
const {Transfer} = high;

class ExportModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            queryMode: '0',
            targetKeys: []
        };

        this.queryModeChange = this.queryModeChange.bind(this);
        this.onTargetKeysChange = this.onTargetKeysChange.bind(this);
        this.confirmExport = this.confirmExport.bind(this);
        this.closeModal = this.closeModal.bind(this);
    }

    queryModeChange(value) {
        this.setState({
            queryMode: value
        })
    }

    onTargetKeysChange(targetKeys) {
        this.setState({
            targetKeys
        });
    };

    confirmExport() {
        if (this.state.targetKeys.length === 0) {
            toast({color: "danger", content: language['hi6007-000085']});/* 国际化处理： 请选择要导出的信息集*/
            return;
        }
        exportPsnInfo.call(this);
        this.closeModal();
    }

    closeModal() {
        this.props.modal.close('infoExport');
        this.setState({
            queryMode: '0',
            targetKeys: []
        })
    }

    render() {
        const {queryMode, targetKeys} = this.state;
        const {modal, exportFilter} = this.props;
        const {createModal} = modal;
        const jobHistory = (that) => {
            return <div>
                <div>
                    <div>{language['hi6007-000089']}</div>{/* 国际化处理： 数据导出范围*/}
                    <NCRadio.NCRadioGroup
                        name="range"
                        selectedValue={queryMode}
                        onChange={this.queryModeChange}
                    >
                        <NCRadio value="0">{language['hi6007-000090']}</NCRadio>{/* 国际化处理： 全部*/}
                        <NCRadio value="1">{language['hi6007-000091']}</NCRadio>{/* 国际化处理： 最新数据*/}
                    </NCRadio.NCRadioGroup>
                </div>
                <div style={{margin: 20}}>
                    <Transfer
                        showMoveBtn={false}
                        treeType={false}
                        dataSource={exportFilter}
                        titles={[language['hi6007-000086'], language['hi6007-000087']]}/* 国际化处理： 待选信息集,已选信息集*/
                        targetKeys={targetKeys}
                        onTargetKeysChange={this.onTargetKeysChange}
                        render={item => item.title}
                        lazy={{container: "modal"}}
                    />
                </div>
            </div>
        };
        return (
            <div>
                {
                    createModal('infoExport', {
                        title: language['hi6007-000088'],/* 国际化处理： 选择导出信息集*/
                        content: jobHistory.call(this),
                        hasBackDrop: true,
                        size: 'lg',
                        beSureBtnClick: this.confirmExport,
                        cancelBtnClick: this.closeModal, //取消按钮事件回调
                        closeModalEve: this.closeModal,
                        userControl: true,
                        className: "export-modal"
                    })
                }
            </div>
        );
    }
}

export default ExportModal;
